<template>
  <div class="swipe">
    <van-swipe class="swipeList" :autoplay="2000" indicator-color="red">
      <template v-for="(item, index) in props.swipeData" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>
      <template #indicator="props"> 
        <div class="indicator">{{props.active}}/{{swipeData.length}}</div>
      </template>

    </van-swipe>
  </div>
</template>

<script setup>

const props = defineProps({
  swipeData: {
    type: Array,
    default: () => []
  }
})

const swipeGroup = {}
for (const item of props.swipeData) {
  let valueArray = swipeGroup[item.enumPictureCategory]
  if (!valueArray) {
    valueArray = []
    swipeGroup[item.enumPictureCategory] = valueArray
  }
  valueArray.push(item)
}
// console.log(swipeGroup)
</script>

<style lang="less" scoped>
.swipe {
  .swipeList {
    position: relative;
    .item {
      img {
        width: 100%;
      }
    }

    .indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.8);
    }
  }
}
</style>